<template>
  <view class="merchant-details-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <image
        class="header-logo"
        src="https://www.anshisu.com/zhjg/static/img/logo.6115cae3.png"
        mode="aspectFit"
      />
      <text class="header-title">安阳市食品安全综合管理平台</text>
    </view>
    <view class="header-line"></view>
    <!-- 商家信息区 -->
    <view class="merchant-info-section">
      <div class="market-info">
        <div class="market-name">{{ merchantInfo ? merchantInfo.address : '暂无地址' }}</div>
        <!-- <div class="verify-badge">
          <uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
        </div> -->
      </div>

      <div class="avatar-container">
        <image :src="avatar" class="avatar" mode="aspectFill"></image>
      </div>

      <div class="info-grid" v-if="merchantInfo">
        <div class="info-item">
          <text class="info-label">经营者名称：</text>
          <text class="info-value">{{ merchantInfo.merchantName }}</text>
        </div>
        <!-- <div class="info-item">
          <text class="info-label">类型：</text>
          <text class="info-value">蔬菜</text>
        </div> -->
        <div class="info-item">
          <text class="info-label">主要负责人：</text>
          <text class="info-value">{{ merchantInfo.contactPerson }}</text>
        </div>
        <div class="info-item">
          <text class="info-label">经营地址：</text>
          <text class="info-value">{{ merchantInfo.address }}</text>
        </div>
        <div class="info-item">
          <text class="info-label">所在区域：</text>
          <text class="info-value">{{ merchantInfo.path }}</text>
        </div>
        <div class="info-item">
          <text class="info-label">联系电话：</text>
          <text class="info-value">{{ merchantInfo.contactPhone }}</text>
        </div>
        <div class="info-item" @click="showRiskAlert">
          <text class="info-label">投诉举报电话：</text>
          <text class="info-value">12315</text>
        </div>
        <!-- <div class="info-item">
          <text class="info-label">评分：</text>
          <div class="rating">
            <uni-icons type="star" size="16" color="#FFD700" fill="#FFD700"></uni-icons>
            <uni-icons type="star" size="16" color="#FFD700" fill="#FFD700"></uni-icons>
            <uni-icons type="star" size="16" color="#FFD700" fill="#FFD700"></uni-icons>
            <uni-icons type="star" size="16" color="#FFD700" fill="#FFD700"></uni-icons>
            <uni-icons type="star" size="16" color="#FFD700" fill="#FFD700"></uni-icons>
          </div>
        </div> -->
      </div>
    </view>

    <!-- 功能按钮区 -->
    <view class="function-buttons">
      <view class="function-item" :class="{ active: activeTab === 'qualification' }" @click="switchTab('qualification')">
        <div class="function-icon">
          <uni-icons type="person" size="24" color="#fff"></uni-icons>
        </div>
        <text class="function-text">主体资质</text>
      </view>
      <view class="function-item" :class="{ active: activeTab === 'inspection' }" @click="switchTab('inspection')">
        <div class="function-icon">
          <uni-icons type="search" size="24" color="#fff"></uni-icons>
        </div>
        <text class="function-text">抽检记录</text>
      </view>
      <view class="function-item" :class="{ active: activeTab === 'certificate' }" @click="switchTab('certificate')">
        <div class="function-icon">
          <uni-icons type="download" size="24" color="#fff"></uni-icons>
        </div>
        <text class="function-text">进货凭证</text>
      </view>
      <view class="function-item" :class="{ active: activeTab === 'entry' }" @click="switchTab('entry')">
        <div class="function-icon">
          <uni-icons type="calendar" size="24" color="#fff"></uni-icons>
        </div>
        <text class="function-text">销售商品</text>
      </view>
    </view>

    <!-- 内容切换区域 -->
    <view class="tab-content">
      <!-- 主体资质 -->
      <view v-if="activeTab === 'qualification'" class="tab-panel">
        <view class="panel-header">
          <text class="panel-title">商户资质信息</text>
        </view>
        <view class="qualification-item" v-if="merchantInfo">
          <text class="qualification-label">营业执照</text>
          <image v-if="merchantInfo.qualification.businessImage" @click="previewImage(merchantInfo.qualification.businessImage)" :src="merchantInfo.qualification.businessImage" class="qualification-image" mode="aspectFit"></image>
          <view v-else class="empty-state">
            <uni-icons type="document-empty" size="80rpx" color="#ccc"></uni-icons>
            <text class="empty-text">暂无营业执照信息</text>
          </view>
          <!-- <text class="qualification-status">已认证</text> -->
        </view>
        <!-- <view class="qualification-item">
          <text class="qualification-label">食品经营许可证</text>
          <image src="https://design.gemcoder.com/staticResource/echoAiSystemImages/06147c137c22d3b4164304d6538f1060.png" 
                 class="qualification-image" mode="aspectFit"></image>
          <text class="qualification-status">已认证</text>
        </view>
        <view class="qualification-item">
          <text class="qualification-label">健康证</text>
          <image src="https://design.gemcoder.com/staticResource/echoAiSystemImages/06147c137c22d3b4164304d6538f1060.png" 
                 class="qualification-image" mode="aspectFit"></image>
          <text class="qualification-status">已认证</text>
        </view> -->
      </view>

      <!-- 抽检记录 -->
      <view v-if="activeTab === 'inspection'" class="tab-panel">
        <view class="panel-header">
          <text class="panel-title">快检记录列表</text>
        </view>
        <view class="inspection-records" v-if="merchantInfo">
          <view class="record-item" v-for="item in merchantInfo.inspectionResult" :key="item.goodsName">
            <!-- <image
              src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f0235ed6465c4099475c6fc2b3136123.png"
              class="record-image"
              mode="aspectFill"
            ></image> -->
            <div class="record-info">
              <text class="record-title">{{ item.goodsName }}</text>
              <!-- <text class="record-detail">快检项目：农药残留</text> -->
              <text class="record-detail">快检结果：{{ item.status }}</text>
              <!-- <text class="record-detail">检验员：明珠管理</text> -->
              <view class="record-date">
                <uni-icons type="calendar" size="14" color="#999"></uni-icons>
                <!-- <text class="date-text">2021-3-17</text> -->
              </view>
            </div>
          </view>
          <view v-if="merchantInfo.inspectionResult.length === 0" class="empty-state">
            <uni-icons type="search" size="80rpx" color="#ccc"></uni-icons>
            <text class="empty-text">暂无抽检记录</text>
            <text class="empty-subtext">该商户暂无快检记录信息</text>
          </view>
        </view>

      </view>

      <!-- 进货凭证 -->
      <view v-if="activeTab === 'certificate'" class="tab-panel">
        <view class="panel-header">
          <text class="panel-title">进货凭证列表</text>
        </view>
        <view class="certificate-records" v-if="merchantInfo">
          <view class="certificate-item" v-for="item in merchantInfo.voucher" :key="item.goodsName">
            <div class="certificate-header">
              <text class="certificate-title">{{ item.goodsName }}</text>
              <!-- <text class="certificate-date">2021-3-17</text> -->
            </div>
            <div class="certificate-info">
              <image class="certificate-image" @click="previewImage(item.purchaseVoucher)" :src="item.purchaseVoucher" mode="aspectFit" />
            </div>
          </view>
          <view v-if="merchantInfo.voucher.length === 0" class="empty-state">
            <uni-icons type="download" size="80rpx" color="#ccc"></uni-icons>
            <text class="empty-text">暂无进货凭证</text>
            <text class="empty-subtext">该商户暂无进货凭证信息</text>
          </view>
        </view>
      </view>

      <!-- 进场记录 -->
      <view v-if="activeTab === 'entry'" class="tab-panel">
        <view class="panel-header">
          <text class="panel-title">销售商品</text>
        </view>
        <view class="entry-records" v-if="merchantInfo">
          <view class="entry-item" v-for="item in merchantInfo.goods" :key="item.goodsCategory">
            <div class="entry-header">
              <text class="entry-title">{{ item.goodsName }}</text>
              <text class="entry-status">√</text>
            </div>
          </view>
          <view v-if="merchantInfo.goods.length === 0" class="empty-state">
            <uni-icons type="calendar" size="80rpx" color="#ccc"></uni-icons>
            <text class="empty-text">暂无销售商品</text>
            <text class="empty-subtext">该商户暂无销售商品信息</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部风险提示按钮 -->
    <view class="risk-alert-button" @click="showRiskAlert">
      <uni-icons type="phone-filled" size="24" color="#fff"></uni-icons>
      <text class="phone-number">12315</text>
    </view>
  </view>
</template>

<script>
// 可以根据需要导入相应的API
import { getMerchantDetail } from '@/api/system/merchant';
import { baseUrl } from '@/config';

export default {
  data() {
    return {
      avatar: '',
      merchantId: null,
      merchantInfo: null,
      inspectionList: [],
      activeTab: 'qualification', // 默认显示抽检记录
    };
  },
  onLoad(options) {
    // 获取商户ID（支持id和merchantId两种参数名）
    if (options.id || options.merchantId) {
      this.merchantId = options.id || options.merchantId;
      this.loadMerchantDetails();
    } else {
      // 如果没有参数，可以使用模拟数据或显示错误
      console.log('未提供商户ID，使用默认数据');
    }
  },
  methods: {
    // 切换标签页
    switchTab(tabName) {
      this.activeTab = tabName;
      // 可以在这里根据不同的标签页加载不同的数据
      this.loadTabData(tabName);
    },

    // 根据标签加载数据
    async loadTabData(tabName) {
      try {
        // 这里可以根据不同的标签页调用不同的API获取数据
        console.log(`加载${tabName}数据`);
        // 实际项目中应调用对应API
      } catch (error) {
        console.error(`加载${tabName}数据失败:`, error);
      }
    },

    // 显示风险提示
    showRiskAlert() {
      uni.showModal({
        title: '投诉举报',
        content: '是否需要立即拨打12315投诉举报？',
        success: (res) => {
          if (res.confirm) {
            // 确认操作
            // console.log('用户确认添加风险提示');
            uni.makePhoneCall({
              phoneNumber: '12315', // 拨打投诉举报电话12315
              success: () => {
                console.log('拨打电话成功');
              },
              fail: (err) => {
                console.error('拨打电话失败:', err);
              },
            });
          }
        },
      });
    },

    // 加载商户详情
    async loadMerchantDetails() {
      try {
        uni.showLoading({ title: '加载中...' });
        // 调用API获取数据
        const response = await getMerchantDetail(this.merchantId);
        if (response.code === 200 && response.data) {
          this.merchantInfo = response.data;
          if(response.data.avatar){
            this.avatar = baseUrl + response.data.avatar;
          }
          this.inspectionList = response.data.inspectionList || [];
        }
      } catch (error) {
        console.error('获取商户详情失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none',
        });
      } finally {
        uni.hideLoading();
      }
    },
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url,
      });
    },
    // 拨打电话
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.error('拨打电话失败:', err);
        },
      });
    },
  },
};
</script>

<style scoped>
.page-header {
  background-color: #1677ff;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2rpx solid #DDB426;
}
.header-line {
  position: relative;
  width: 100%;
  padding-top: 4rpx;
  background-color: #1677ff;
  border-bottom: 6rpx solid #DDB426;
}
.header-logo {
  height: 55rpx;
  width: 60rpx;
}

.header-title {
  position: relative;
  display: block;
  font-size: 40rpx;
  text-align: center;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
}
.merchant-details-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 商家信息区 */
.merchant-info-section {
  background-color: #1677ff;
  padding: 30rpx;
  padding-bottom: 40rpx;
}

.market-info {
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: flex-start; */
  margin-bottom: 20rpx;
}

.market-name {
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  display: block;
  color: rgba(255, 255, 255, 0.9);
}

.verify-badge {
  width: 32rpx;
  height: 32rpx;
  background-color: #52c41a;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-top: 20rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 5rpx;
}
.info-icon {
  font-size: 14rpx;
  color: #fff;
  margin-right: 8rpx;
}
.info-value {
  font-size: 28rpx;
  color: #fff;
}

.rating {
  display: flex;
  align-items: center;
}

.avatar-container {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  border: 6rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 功能按钮区 */
.function-buttons {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 20rpx 0;
  overflow-x: auto;
}

.function-item {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
  position: relative;
}

.function-item.active .function-text {
  color: #1677ff;
  font-weight: 500;
}

.function-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 40rpx;
  height: 6rpx;
  background-color: #1677ff;
  border-radius: 3rpx;
}

.function-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #52c41a;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
}

/* 标签页内容区 */
.tab-content {
  padding-bottom: 120rpx;
}

.tab-panel {
  padding: 20rpx;
}

.panel-header {
  margin-bottom: 20rpx;
}

.panel-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

/* 抽检记录 */
.inspection-records {
  padding: 0;
}

.record-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.record-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
}

.record-info {
  flex: 1;
  margin-left: 25rpx;
}

.record-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.record-detail {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.record-date {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.date-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

/* 主体资质 */
.qualification-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.qualification-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.qualification-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
  margin-bottom: 15rpx;
}

.qualification-status {
  font-size: 24rpx;
  color: #52c41a;
}

/* 进货凭证 */
.certificate-records {
  padding: 0;
}

.certificate-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.certificate-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.certificate-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.certificate-date {
  font-size: 24rpx;
  color: #999;
}

.certificate-info {
  margin-top: 10rpx;
}

.certificate-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
  margin-bottom: 15rpx;
}

.certificate-detail {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

/* 进场记录 */
.entry-records {
  padding: 0;
}

.entry-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.entry-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.entry-status {
  font-size: 24rpx;
  color: #52c41a;
}

.entry-info {
  margin-top: 10rpx;
}

.entry-detail {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

/* 检查记录 */
.check-records {
  padding: 0;
}

.check-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.check-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.check-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.check-result {
  font-size: 24rpx;
  color: #52c41a;
}

.check-info {
  margin-top: 10rpx;
}

.check-detail {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.empty-subtext {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 10rpx;
}

/* 底部风险提示按钮 */
.risk-alert-button {
  position: fixed;
  bottom: 30rpx;
  right: 30rpx;
  height: 90rpx;
  padding: 0 20rpx;
  background-color: #52c41a;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(82, 196, 26, 0.4);
}

.risk-alert-button uni-icons {
  font-size: 40rpx;
  color: #fff;
}

.phone-number {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
  margin-left: 8rpx;
}
</style>
